<template>
  <!-- 外层容器 - 核心修复 -->
  <view class="page-root">
    <view v-if="template">
      <s-layout 
        title="首页" 
        navbar="custom" 
        tabbar="/pages/index/index" 
        :bgStyle="template.style?.background"
        :navbarStyle="template.style?.navbar" 
        onShareAppMessage 
        :showFloatButton="true"
      >
        <!-- 内容容器 - 二次防护 -->
        <view class="content-wrapper">
          <s-block 
            v-for="(item, index) in template.data" 
            :key="index" 
            :styles="item.style"
            class="content-block"
          >
            <s-block-item 
              :type="item.type" 
              :data="item.data" 
              :styles="item.style" 
            />
          </s-block>
          <s-popup-image />
          <s-goods></s-goods>
        </view>
      </s-layout>
      
      <!-- 浮动按钮保持原有逻辑 -->
      <image 
        v-if="isLogin" 
        :style="floatingStyle" 
        @touchstart="startDrag" 
        @touchmove="onDrag" 
        @touchend="stopDrag"
        class="floating-image" 
        src="/static/draw.png" 
        @click="navigateToPage"
      ></image>
    </view>
  </view>
</template>

<script setup>
	import {
	  computed,
	  ref
	} from 'vue';
	import {
	  onLoad,
	  onShow,
	  onPageScroll,
	  onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	import {
	  showAuthModal,
	  closeAuthModal
	} from '@/sheep/hooks/useModal';
	
	// 隐藏原生 tabBar
	uni.hideTabBar({
	  fail: () => {},
	});
	
	// 计算属性
	const template = computed(() => sheep.$store('app').template?.home);
	const isLogin = computed(() => {
	  console.log('isLogin 计算属性被触发');
	  return sheep.$store('user').isLogin; // 确保 sheep.$store 返回响应式数据
	});
	
	// 生命周期钩子
	onShow(() => {
	  // 正确访问 computed 属性
	  if (!isLogin.value) {
	    // showAuthModal('accountLogin'); // 假设 showAuthModal 是你的方法
	    console.log('用户未登录');
	  }
	});
	
	onLoad((options) => {
	  // #ifdef MP
	  // 小程序识别二维码
	  if (options.scene) {
	    const sceneParams = decodeURIComponent(options.scene).split('=');
	    options[sceneParams[0]] = sceneParams[1];
		console.log(options);
	  }
	  // #endif
	
	  // 预览模板
	  if (options.templateId) {
	    sheep.$store('app').init(options.templateId);
	  }
	
	  // 解析分享信息
	  if (options.spm) {
	    $share.decryptSpm(options.spm);
	  }
	
	  // 进入指定页面(完整页面路径)
	  if (options.page) {
	    sheep.$router.go(decodeURIComponent(options.page));
	  }
	});

	// 下拉刷新
	onPullDownRefresh(() => {
		sheep.$store('app').init();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});

	onPageScroll(() => {});

	function navigateToPage() {
		uni.navigateTo({
			url: '/pages/game/index/index' // 替换为目标页面的路径
		});
	}

	// 初始位置
	const position = ref({
		x: 20,
		y: 500
	}); // 距右侧 20px，底部 200px
	const isDragging = ref(false); // 是否正在拖动
	const startPosition = ref({
		x: 0,
		y: 0
	}); // 记录触摸开始的位置

	// 动态样式计算
	const floatingStyle = computed(() => {
		return `position: fixed; bottom: ${position.value.y}px; right: ${position.value.x}px; width: 50px; height: 50px; z-index: 999;`;
	});

	// 开始拖动
	function startDrag(e) {
		isDragging.value = true;
		const touch = e.touches[0]; // 获取触摸点
		startPosition.value = {
			x: touch.clientX,
			y: touch.clientY
		}; // 记录起始位置
	}

	// 拖动中
	function onDrag(e) {
		if (!isDragging.value) return;
		const touch = e.touches[0];
		const deltaX = startPosition.value.x - touch.clientX; // 计算X轴偏移量
		const deltaY = startPosition.value.y - touch.clientY; // 计算Y轴偏移量

		// 更新位置
		position.value.x += deltaX;
		position.value.y += deltaY;

		// 更新开始触摸点为当前点
		startPosition.value = {
			x: touch.clientX,
			y: touch.clientY
		};
	}

	// 停止拖动
	function stopDrag() {
		isDragging.value = false;
	}
</script>

<style>
  /* 关键修复样式调整 */
  /* 1. 保持全局横向限制 */
  page {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    min-height: 100vh !important; /* 改为 min-height */
  }

  /* 2. 修正页面容器 */
  .page-root {
    width: 100vw;
    min-height: 100vh; /* 关键调整 */
    overflow-x: hidden;
    overflow-y: auto; /* 允许垂直滚动 */
    -webkit-overflow-scrolling: touch !important; /* 启用iOS弹性滚动 */
  }

  /* 3. 内容区域调整 */
  .content-wrapper {
    width: 100% !important;
    min-height: 100vh; /* 确保内容高度 */
    overflow-x: hidden !important;
    transform: none; /* 移除 GPU 加速 */
  }

  /* 4. 区块元素保持防护 */
  .content-block {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
</style>